<template>

  <div class="complete-main">
    <div class="complete-list-box">
      <div class="complete-list-boxwrap">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
          <ul class="complete-box">
            <li class="complete-item">
              <el-form-item label="主体名称：" prop="name">
                <el-input placeholder="主体名称" v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="英文名称：" prop="engname">
                <el-input placeholder="英文名称" v-model="ruleForm.engname"></el-input>
              </el-form-item>
            </li>
            <li class="complete-item">
              <el-form-item label="证件号码：" prop="Idcardnumber">
                <el-input placeholder="证件号码" v-model="ruleForm.Idcardnumber"></el-input>
              </el-form-item>
              <el-form-item label="证件编号：" prop="Idcardserial">
                <el-input placeholder="证件编号" v-model="ruleForm.Idcardserial"></el-input>
              </el-form-item>
            </li>
            <li class="complete-item">
              <el-form-item label="证书类别：" prop="credentialType">
                <el-input placeholder="证书类别" v-model="ruleForm.credentialType"></el-input>
              </el-form-item>
              <el-form-item label="法人代表：" prop="lawPerson">
                <el-input placeholder="法人代表" v-model="ruleForm.lawPerson"></el-input>
              </el-form-item>
            </li>
            <li class="complete-item">
              <el-form-item label="地址信息：" prop="addressInfo">
                <el-input placeholder="地址信息" v-model="ruleForm.addressInfo"></el-input>
              </el-form-item>
              <el-form-item label="英文地址：" prop="engAddressInfo">
                <el-input placeholder="英文地址" v-model="ruleForm.engAddressInfo"></el-input>
              </el-form-item>
            </li>
            <li class="complete-item">
              <el-form-item label="电话号码：" prop="iphone">
                <el-input placeholder="电话号码" v-model="ruleForm.iphone"></el-input>
              </el-form-item>
              <el-form-item label="申请人国籍/地区：" prop="nationality">
                <el-input placeholder="申请人国籍/地区" v-model="ruleForm.nationality"></el-input>
              </el-form-item>
            </li>
            <li class="complete-item">
              <el-form-item label="电子邮箱：" prop="email">
                <el-input placeholder="电子邮箱" v-model="ruleForm.email"></el-input>
              </el-form-item>
              <el-form-item label="邮政编码：" prop="zipCode">
                <el-input placeholder="邮政编码" v-model="ruleForm.zipCode"></el-input>
              </el-form-item>
            </li>

            <li class="complete-item1">
              <el-form-item label="所属省份：" prop="province">
                <el-select v-model="ruleForm.province" @change="provincechange">
                  <el-option label="省份/直辖市" value="#"></el-option>
                  <el-option
                    v-for="(item,index) in provincearr"
                    :label="item"
                    :value="item"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市：" prop="city">
                <el-select placeholder="请选择城市" v-model="ruleForm.city" @change="citychange">
                  <el-option label="市/县" value="#"></el-option>
                  <el-option
                    v-for="(item,index) in cityrr"
                    :label="item.label"
                    :value="item.label"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城镇：" prop="cities">
                <el-select placeholder="请选择城镇" v-model="ruleForm.cities">
                  <el-option label="镇/区" value="#"></el-option>
                    <el-option
                    v-for="(item,index) in cities"
                    :label="item.label"
                    :value="item.label"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </li>
          </ul>
          <div class="complete-img">
            <img src=" " alt />
          </div>
        </el-form>
      </div>
    </div>
    <div class="complete-btn">
      <button class="complete-button" @click="submitForm('ruleForm')">修正数据信息提交</button>
    </div>
  </div>
</template>
<script>
import City from "../../assets/js/city";
export default {
  name: "completeinfo",
  data() {
    return {
      provincearr: [],
      cityrr: [],
       cities: [],
      ruleForm: {
        name: "",
        engname: "",
        Idcardnumber: "",
        Idcardserial: "",
        credentialType: "",
        lawPerson: "",
        addressInfo: "",
        nationality: "",
        engAddressInfo: "",
        iphone: "",
        email: "",
        zipCode: "",
        province: "省份/直辖市",
        city: "",
        cities: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入主体名称", trigger: "blur" },
          { trigger: "blur" }
        ],
        engname: [
          { required: false, message: "请输入英文名称", trigger: "blur" }
        ],
        Idcardnumber: [
          { required: true, message: "请输入证件号码", trigger: "blur" }
        ],

        Idcardserial: [
          { required: false, message: "请输入证件编号", trigger: "blur" }
        ],
        credentialType: [
          { required: true, message: "请输入证书类别", trigger: "blur" }
        ],
        lawPerson: [
          { required: true, message: "请输入法人代表", trigger: "blur" }
        ],

        addressInfo: [
          { required: true, message: "请输入地址信息", trigger: "blur" }
        ],
        engAddressInfo: [
          { required: false, message: "请输入英文地址", trigger: "change" }
        ],
        iphone: [
          { required: true, message: "请输入电话号码", trigger: "blur" }
        ],
        nationality: [
          {
            required: false,
            message: "请输入申请人国籍/地区",
            trigger: "change"
          }
        ],

        email: [{ required: true, message: "请输入电子邮箱", trigger: "blur" }],
        zipCode: [
          { required: true, message: "请输入邮政编码", trigger: "blur" }
        ],
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],

        city: [{ required: true, message: "请选择城市", trigger: "blur" }],
        cities: [{ required: true, message: "请选择城镇", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    citydo() {
      City.forEach(item => {
        this.provincearr.push(item.label);
      });
    },
    provincechange() {
      this.com_seclected;
    },
    citychange(){
      this.com_cyselected
    }
  },
  mounted() {
    this.citydo();
  },
  computed: {
    com_seclected: {
      get: function() {
        var arr = City.filter(item => {
          if (item.label == this.ruleForm.province) {
            return item.children;
          }
        });

        this.ruleForm.city = "市/县"
        this.cityrr = arr[0].children;
      
      }
    },
    com_cyselected: {
      get: function() {
        var arr = this.cityrr.filter(item => {
        
          if (item.label == this.ruleForm.city) {
            return item.children;
          }
        });
       
            this.ruleForm.cities = "镇/区"
        this.cities = arr[0].children;
      }
    }
  }
};
</script>

<style scoped lang="less">
.complete-main {
  width: 100%;
  background-color: #fff;
  .complete-list-box {
    width: 100%;
    padding: 20px 20% 20px 10%;
    box-sizing: border-box;
    .complete-list-boxwrap {
      position: relative;
      width: 100%;
      .complete-img {
        position: absolute;
        top: 0;
        right: -250px;
        width: 200px;
        height: 300px;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .complete-item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      margin: 10px 0;
      .el-form-item {
        width: 45%;
      }
    }
    .complete-item1 {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      margin: 10px 0;
      .el-form-item {
        width: 30%;
      }
    }
  }

  .complete-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 30px 0;
    background-color: rgb(252, 253, 254);
    border-top: 1px solid rgb(241, 242, 244);
    .complete-button {
      padding: 15px 30px;
      color: #fff;
      background-color: rgb(51, 202, 187);
      cursor: pointer;
      &:hover {
        background-color: rgb(82, 211, 199);
      }
    }
  }
}
</style>
